<template>
  <div class="">
    <left_statusVue></left_statusVue>
    <div class="right-box">
      <Top_status></Top_status>
      <ul class="center">
        <li v-for="index in displayactive" :key="index" :value="index" :v-show="index.id < 3">
          <div class="maintext-box">
            <p class="maintext-left">活动主题：</p>
            <p class="maintext">{{ index.name }}</p>
          </div>
          <div class="tip">
            <p>活动时间：{{ index.time }}</p>
            <p class="result">最终投票结果:{{ index.result }}</p>
            <div>
              <p>每人最多{{ index.maxchoose }}票</p>
              <!-- 查看详情 -->
              <button class="btn btn-success" @click="choose($event)">
                <popup_detailsVue></popup_detailsVue>
              </button>
            </div>
          </div>
          <!-- 清除浮动效果的高度塌陷 -->
          <div style="clear: both"></div>
        </li>
        
        <div :style="choose_status == 1 ? '' : 'display:none;'" class="choose_main_box">
            <div class="choose_top">
              <button class="btn btn-default" @click="back()">返回</button>
            </div>
            <div style="clear: both"></div>
            <div class="choose_main">
              <div>
                <p style="float: left" class="theme">活动主题：</p>
                <div style="clear: both"></div>
              </div>
              <div class="choose_main_text">
                <!-- 下标从0开始 id从1开始 -->
                <!-- {{ active[this.choose_id-1] }} -->
                <p id="choose_center_text">请返回选择相关的选项</p>
              </div>
              <div class="tip">
                <p>活动时间：{{ active[choose_id - 1].time }}</p>
                <div>
                  <p>每人最多{{ active[choose_id - 1].maxchoose }}票</p>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
            <div class="option_box">
              <div v-for="item in option" :key="item.id" class="option_list">
                <p class="option_top">选项{{ item.top }}：</p>
                <div style="clear: both"></div>
                <button class="option_center" :style="myoption_id == item.id ? 'border: solid 1px #e20000' : ''
                  " :id="'choose_' + item.id" @click="option_choose($event.target)">
                  {{ item.center }}
                </button>
                <div style="clear: both"></div>
              </div>
            </div>
            <div>
              <button class="btn btn-success Con_vote">确认投票</button>
            </div>
          </div>
          
        <!-- pager-count 能够显示的最多页码 -->
        <el-pagination :page-size="1" :pager-count="5" layout="prev, pager, next" :total="total"
          @current-change="pagechange" />
      </ul>
    </div>
  </div>
</template>

<script>
import left_statusVue from '@/components/left_status/left_status.vue';
import Top_status from '@/components/top_status/top_status.vue';
import popup_detailsVue from '@/components/popup/popup_details.vue';

export default {
  data() {
    return {
      active: [
        {
          id: "1",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "1",
          result: 'A,B'
        },
        {
          id: "2",
          name: "关于2024年11月4日",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "2",
          result: 'A'
        },
        {
          id: "3",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "3",
          result: 'A,C'
        },
        {
          id: "4",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "4",
          result: 'A'
        },
        {
          id: "5",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "5",
          result: 'A'
        },
        {
          id: "6",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "6",
          result: 'A'
        },
        {
          id: "7",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "7",
          result: 'A'
        },
      ],
      option: [
        {
          id: "1",
          top: "A",
          center:
            "李大伟李大伟李大伟李大伟李大伟李大伟李大伟李大伟李大伟李大伟李大伟",
        },
        {
          id: "2",
          top: "B",
          center: "陆长寻",
        },
        {
          id: "1",
          top: "C",
          center: "张三丰",
        },
        {
          id: "1",
          top: "D",
          center: "王大武",
        },
      ],
      myoption_id: 0, //我的选择选项的id
      total: 1, //默认总页数 
      page: 1, //默认页数
      M: 0, //当前显示的开头
      N: 6, // 你想显示的结尾  显示数量=尾-头
      status: '投票记录',
      newM: 0, //临时存储M
      newtotal: 0, //临时存储total
      choose_status: 0, //判断当前是否已选中 0为未选中 1为选中状态
      
      choose_id: 1, //选中当前的投票活动
      choose_option_count: 0, //选中当前的选项个数
    };
  },
  components: {
    left_statusVue,
    Top_status,
    popup_detailsVue,
  },
  created() {
    let newtotal = this.active.length / (this.N - this.M)
    this.total = newtotal; //更新总页数
    // console.log(newtotal);
  },
  computed: {
    // 通过计算属性控制显示的个数
    displayactive() {
      return this.active.slice(this.M, this.N);
    },
  },
  methods: {
    mystatus() {
      //切换左侧status状态
      window.location.href = "./voting"

    },
    recordstatus() {
      // window.location.href = "./voting_record"
    },
    choose(data) {
      // console.log(data);
      console.log(data.parentNode.parentNode.parentNode);
      // this.newM=this.M
      // this.M=this.N+1 //将起始位置置于后端
      this.newtotal = this.total; //存储页数
      this.total = 0; //将页数置零
      this.choose_status = 1; //已选中
      this.choose_id = data.id;
      console.log(data.id);
      document.getElementById("choose_center_text").innerHTML =
        this.active[this.choose_id - 1].name; //获取并将标题内容赋值
    },

    pagechange(data) {
      // console.log('hello',data);
      // console.log(this.M,this.N);
      // data为点击转跳的页码
      if (data > this.page) {
        //如果转跳页面大于当前页数
        // console.log("往后");
        let a = this.M;
        let shownum = this.N - a; //一页展示的个数
        // console.log(shownum);

        this.M += (data - this.page) * shownum; //将当前的页面转为转跳的位置
        this.N += (data - this.page) * shownum;
        // console.log(this.M,this.N);
        this.page = data;
        // console.log('当前页'+this.page);
      } else {
        // console.log('往前');
        let a = this.M;
        let shownum = this.N - a; //一页展示的个数
        // console.log(shownum);

        this.M -= (this.page - data) * shownum; //将当前的页面转为转跳的位置
        this.N -= (this.page - data) * shownum;
        // console.log(this.M,this.N);
        this.page = data;
        // console.log('当前页'+this.page);
      }
    },
  },
};
</script>

<style scoped>
.center {
  width: 75vw;
  height: 80vh;
  border: solid 1px #7c7c7c;
  margin-top: 45px;
  margin-right: 70px;

  /* padding-top: 25px; */
  float: right;
  padding: 20px 40px 0px 40px;
}

.center li {
  list-style-type: none;
  margin-bottom: 5px;
}

.center li .maintext-box {
  display: flex;
  /* margin-top: 0px;
    margin-left: 5%; */

  font-size: 24px;
  color: #000000;
  /* width: 68vw; */
  height: 5vh;
  font-size: 20px;
}

.center li div .maintext {
  display: flex;
  width: 100%;
  height: 5vh;
  border: solid 1px #7c7c7c;
  align-items: center;
  justify-content: flex-start;
  /* padding: 0px 0px 0 6px; */
}

.maintext-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 10px;
  width: 115px;
}

.tip {
  margin: 0px;
  /* display: flex;
    justify-content: space-between; */
  /* padding: 3px 5vw 0 5%; */
}

.tip p {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #737373;
  float: left;
  margin-top: 10px;

  line-height: 25px;
}

.tip div {
  float: right;
}

.btn-success {
  margin-left: 15px;
  padding: 4px 10px;
  margin-top: 4px;
}

.tip .result {
  margin-left: 20px;
  color: #e90000;
  font-weight: unset;
}
</style>